<!-- author: lizq -->
<!-- date: 2023-03-01 15:09:44 -->
<!-- description: table - 详情页 -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="edit-container">
    <div class="panel">
      <div v-for="(items, index) in formDataInfo" :key="index">
        <!-- 标题 -->
        <div class="title">{{ items.title }}</div>
        <!-- 表单 -->
        <div class="content">
          <el-form :model="formData" label-width="200px" class="demo-ruleForm" status-icon>
            <el-row>
              <el-col v-for="(item, i) in items.options" :key="i" :span="spanNum(i, item.span, items.options)">
                <el-form-item :label="item.label">
                  <G-dict-tag v-if="item.type == 'dict' && $dict[index]" :options="$dict[index][item.dict]" :value="formData[item.prop]" />
                  <div v-else-if="item.type == 'img' && formData[item.prop]" class="detail-img">
                    <img :src="formData[item.prop]" alt="" @click="handlePictureCardPreview(formData[item.prop])" />
                  </div>
                  <div v-else-if="item.type == 'fileList'" class="fileList">
                    <div v-for="(file, fi) in formData[item.prop]" :key="fi" class="file-item" @click="toFile(file)">{{ file.fileName }}</div>
                  </div>
                  <slot v-else-if="item.type == 'slot'" :name="item.prop"></slot>
                  <div v-else>{{ formData[item.prop] }}</div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <!-- 插槽 -->
      <slot></slot>
    </div>
    <!-- 底部按钮 -->
    <div class="footer">
      <slot name="footer"> <el-button @click="goBack">返回</el-button> </slot>
    </div>
    <!-- 图片预览 -->
    <el-dialog v-model="dialogVisible" title="预览">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, getCurrentInstance, ref, onMounted, reactive, toRefs } from "vue";

const $props = defineProps({
  formData: {
    type: Object,
    default: () => {}
  },
  formDataInfo: {
    type: Array,
    default: () => []
  }
});
const $emit = defineEmits(["callBackData"]);

const state = reactive({
  dialogVisible: false,
  dialogImageUrl: ""
});
const { dialogVisible, dialogImageUrl } = toRefs(state);

//初始化-字典数据
const getDict = getCurrentInstance().proxy.$dict;
const $dict = ref([]);

onMounted(() => {
  $props.formDataInfo.map((ele) => {
    if (ele.options) {
      handleDict(ele.options);
    }
  });
});

//处理字典
const handleDict = (arr) => {
  if (arr && arr.length) {
    let dictList = [];
    arr.forEach((item) => {
      if (item.dict) {
        dictList.push(item.dict);
      }
    });
    if (dictList.length) $dict.value.push(getDict(dictList));
  }
};

//计算span值
const spanNum = computed(() => (index, span, arr) => {
  if (span) {
    return span;
  } else {
    return index == arr.length - 1 && arr.length % 2 == 1 ? 24 : 12;
  }
});

const goBack = () => {
  $emit("callBackData");
};

// 图片预览
const handlePictureCardPreview = (url) => {
  state.dialogImageUrl = url;
  state.dialogVisible = true;
};

const toFile = (file) => {
  window.open(file.fileUrl, "_blank");
};
</script>

<style scoped lang="scss">
.panel {
  height: calc(100% - 40px);
  padding-bottom: 80px;
  overflow-y: auto;
}
.content {
  height: auto;
  padding-bottom: 0;
}
.detail-img {
  img {
    max-width: 100%;
    height: auto;
  }
}
.fileList {
  .file-item {
    cursor: pointer;
    margin-bottom: 10px;
    text-decoration: underline;
    line-height: 20px;
    &:nth-last-child(1) {
      margin-bottom: 0;
    }
    &:hover {
      color: #999;
    }
  }
}
:deep(.el-cascader) {
  width: 100%;
}

:deep(.el-form-item) {
  height: 100%;
  margin-bottom: 0 !important;
}

:deep(.el-row) {
  border: 1px #e3e5ef solid;
  margin-bottom: $G-height10 * 2;
}

:deep(.el-form-item__label) {
  height: auto;
  min-height: 40px;
  line-height: 40px;
  background-color: #f4f7fe;
  border: 1px #e3e5ef solid;
  justify-content: center;
  align-items: center;
  padding: 0;
}

:deep(.el-form-item__content) {
  height: auto;
  min-height: 40px;
  line-height: 20px;
  border: 1px #e3e5ef solid;
  box-sizing: border-box;
  padding: 10px;
}
</style>
